<template>
  <div class="cs-page-container">
    <el-button v-if="debug" style="margin: 10px" @click="editPage"
      >请求相关编辑</el-button
    >
    <div class="cs-filter-container" style="marginBottom: 10px">
      <template v-if="configData.globalOperations">
        <el-button
          v-for="operation in configData.globalOperations"
          :key="operation.name"
          :type="operation.displayType"
          @click="handleBulkOperation(operation, true)"
        >
          {{ operation.name }}
        </el-button>
      </template>
    </div>
    <div class="cs-filter-container">
      <template v-for="(item, index) in configData['selects']">
        <template v-if="item.selectType === 'select'">
          <el-select
            v-if="configData['selectRequest']"
            :key="index"
            v-model="requestItem.params[item.selectModel]"
            filterable
            clearable
            :placeholder="item['placeholder']"
          >
            <template v-for="(option, idx) in item['options']">
              <el-option
                :key="idx"
                :label="option['name']"
                :value="option['value']"
              />
            </template>
          </el-select>
        </template>
        <template v-if="item.selectType === 'input'">
          <el-input
            :key="index"
            v-model.trim="requestItem.params[item.selectModel]"
            clearable
            filterable
            :placeholder="item['placeholder']"
          />
        </template>
        <template v-if="item.selectType === 'apiselect'">
          <api-select
            :key="index"
            v-model="requestItem.params[item.selectModel]"
            :config="item"
          ></api-select>
        </template>
      </template>

      <el-date-picker
        v-if="configData['time_select']"
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="handleDateRangeChanged"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="resetPaginationAndSearch"
        >查询</el-button
      >
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
        >重置</el-button
      >
      <template v-if="configData.bulkOperations">
        <el-button
          v-for="operation in configData.bulkOperations"
          :key="operation.name"
          :type="operation.displayType"
          @click="handleBulkOperation(operation)"
        >
          {{ operation.name }}
        </el-button>
      </template>
    </div>
    <div
      class="cs-filter-container"
      v-if="debug && configData.resultHandler === 'table'"
    >
      <el-button style="margin: 10px" @click="handleTableEditClicked"
        >表格展示编辑</el-button
      >
      <el-button style="margin: 10px" @click="handleTableOperationClicked"
        >表格操作编辑</el-button
      >
    </div>
    <div class="cs-filter-result" v-if="configData.resultHandler === 'table'">
      <el-table
        v-if="configData.tableColumns"
        v-loading="listLoading"
        :data="resultData"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        @selection-change="handleSelectionChange"
        :height="'calc(100vh - 330px)'"
      >
        <el-table-column
          v-if="
            configData.bulkOperations && configData.bulkOperations.length > 0
          "
          type="selection"
          width="100px"
          align="center"
        />
        <template v-for="(columnItem, key) in configData.tableColumns">
          <el-table-column
            v-if="columnItem.visible"
            :key="key"
            align="center"
            :label="columnItem.label"
            :width="columnItem.width ? columnItem.width + 'px' : 'auto'"
          >
            <template slot-scope="{ row }">
              <!-- <span>{{ row[key] }}</span> -->
              <span v-if="columnItem.type === '日期'">{{
                row[columnItem.key] | parseTime('{y}-{m}-{d}')
              }}</span>
              <span v-else-if="columnItem.type === '时间'">{{
                row[columnItem.key] | parseTime
              }}</span>
              <span v-else-if="columnItem.type === '整数'">{{
                row[columnItem.key] | numberFilter
              }}</span>
              <span v-else-if="columnItem.type === '2位小数'">{{
                row[columnItem.key] | numberFilter(2)
              }}</span>
              <span v-else-if="columnItem.type === '4位小数'">{{
                row[columnItem.key] | numberFilter(4)
              }}</span>
              <!-- 时分 -->
              <span v-else-if="columnItem.type === '时分'">{{
                row[columnItem.key] | minToHourMin
              }}</span>
              <span v-else-if="columnItem.type === '时分秒'">{{
                row[columnItem.key] | secondTohms
              }}</span>
              <span v-else-if="columnItem.type === '开启服务类型'">{{
                row[columnItem.key] | openServices
              }}</span>
              <span v-else-if="columnItem.type === '国家'">{{
                row[columnItem.key] | countryCode
              }}</span>
              <div v-else-if="columnItem.type === '聊天内容解析'">
                <!-- {{ row[columnItem.key] }} -->
                <img
                  v-if="JSON.parse(row[columnItem.key]).messageType == 'image'"
                  :src="JSON.parse(row[columnItem.key]).url | imageUrl"
                  alt=""
                  width="30px"
                  @click="
                    handleImageClicked(JSON.parse(row[columnItem.key]).url)
                  "
                />

                <audio
                  v-else-if="
                    JSON.parse(row[columnItem.key]).messageType == 'audio'
                  "
                  :src="JSON.parse(row[columnItem.key]).url"
                  controls
                  loop
                  muted
                >
                  浏览器不支持音频播放。
                </audio>
                <span
                  v-else-if="!JSON.parse(row[columnItem.key]).messageType"
                  >{{ JSON.parse(row[columnItem.key]).msg }}</span
                >
              </div>

              <span v-else-if="columnItem.type === '富文本'"
                ><span v-html="row[columnItem.key]"></span
              ></span>

              <span v-else-if="columnItem.type === 'Boolean'">{{
                row[columnItem.key] | booleanFilter
              }}</span>
              <span v-else-if="columnItem.type === '枚举'">
                {{ row[columnItem.key] | enumFilter(columnItem.ext) }}
              </span>
              <span v-else-if="columnItem.type === '多枚举'">
                {{ row[columnItem.key] | multiEnumFilter(columnItem.ext) }}
              </span>
              <span
                v-else-if="
                  columnItem.type === '图片' || columnItem.type === '单张图片'
                "
              >
                <img
                  :src="row[columnItem.key] | imageUrl"
                  width="100px"
                  @click="
                    handleImageClicked(row[columnItem.key], columnItem.ext)
                  "
                />
              </span>
              <ul
                v-else-if="columnItem.type === '多张图片'"
                class="photos-list"
              >
                <li
                  v-if="imageItem != ''"
                  v-for="(imageItem, i) in row[columnItem.key]"
                  :key="i"
                >
                  <div
                    v-for="(item, index) in imageItem.split(',')"
                    :key="index"
                  >
                    <img
                      :src="item | imageUrl"
                      @click="handleImageClicked(item, columnItem.ext)"
                    />
                  </div>
                </li>
              </ul>
              <ul
                v-else-if="
                  columnItem.type === '多张图片(非json)' && row[columnItem.key]
                "
                class="photos-list"
              >
                <li
                  v-for="(imageItem, i) in splitImage(
                    row[columnItem.key],
                    columnItem.ext
                  )"
                  :key="i"
                >
                  <img
                    :src="imageItem | imageUrl"
                    @click="handleImageClicked(imageItem)"
                  />
                  <!-- {{ imageItem }} -->
                </li>
              </ul>
              <ul
                v-else-if="
                  columnItem.type === '单/多张图片(有宽高)' &&
                    row[columnItem.key]
                "
                class="photos-list"
              >
                <li
                  v-for="(item, i) in JSON.parse(row[columnItem.key])"
                  :key="i"
                  class="haveHAndWImg"
                >
                  <img
                    :src="item.url | imageUrl"
                    @click="handleImageClicked(item.url)"
                  />
                </li>
              </ul>
              <ul
                v-else-if="columnItem.type === '多条目数据'"
                class="items-list"
              >
                <li v-for="(item, i) in row[columnItem.key]" :key="i">
                  <span>
                    {{ item | mutiItemDataFilter }}
                  </span>
                </li>
              </ul>

              <span v-else-if="columnItem.type === '长文本'" class="longText">
                {{ row[columnItem.key] }}
              </span>
              <span v-else-if="columnItem.type === '自定义计算'">
                {{ row | customFilter(columnItem.ext) }}
              </span>
              <span v-else-if="columnItem.type === '视频'">
                <div v-if="row[columnItem.key]" class="video-wrap">
                  <!-- {{ JSON.parse(row[columnItem.key]).thumb }} -->
                  <img
                    width="100"
                    style="cursor:pointer"
                    title="点击放大"
                    :src="JSON.parse(row[columnItem.key]).thumb | imageUrl"
                    alt=""
                    @click="
                      handleImageClicked(
                        JSON.parse(row[columnItem.key]).url,
                        null,
                        'video'
                      )
                    "
                  />
                  <!-- <img
                    controls
                    :src="
                      row[columnItem.key]
                        | customFilter(columnItem.ext.thumb)
                        | imageUrl
                    "
                    width="100"
                    style="cursor:pointer"
                    title="点击放大"
                    @click="
                      handleImageClicked(
                        row[columnItem.key],
                        columnItem.ext.video,
                        'video'
                      )
                    "
                  /> -->
                </div>
              </span>
              <span v-else>{{ row[columnItem.key] }}</span>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          v-if="configData.tableOperations"
          width="120px"
        >
          <!-- :width="configData.tableOperations.length * 80 + 'px'" -->
          <template slot-scope="{ row }">
            <template v-for="(item, idx) in configData.tableOperations">
              <template v-if="operationVisible(item, row)">
                <el-button
                  :key="idx"
                  size="mini"
                  :type="item.displayType"
                  @click="performTableOperation(item, row)"
                  style="margin:5px"
                  >{{ item.name }}</el-button
                >
              </template>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!-- offset-limit型 -->
      <template v-if="configData.pagination !== 0">
        <TablePagination
          :current-page="requestItem.params.pageNum"
          :limit="requestItem.params.limit"
          :total="resultCount"
          :loading="listLoading"
          @handleSizeChange="handleSizeChangeOffsetLimit"
          @handleCurrentChange="handleCurrentChangeOffsetLimit"
        />
      </template>
    </div>
    <page-edit-dialog
      :visible.sync="editDialogFormVisible"
      :value="configData"
      :requestList="requestList"
      @success="savePage"
    ></page-edit-dialog>
    <table-column-list-dialog
      :visible.sync="tableDisplayEditDialogVisible"
      :value="configData.tableColumns"
      @success="saveTableColumns"
    ></table-column-list-dialog>
    <operation-list-dialog
      :visible.sync="tableOperationEditDialogVisible"
      :value="configData.tableOperations"
      @success="saveTableOperations"
    ></operation-list-dialog>
    <ImageViewer
      :visible.sync="showImage"
      :url="imageUrlToShow"
      :type="imageViewType"
    />
    <template v-if="selectedDialog">
      <component
        :is="selectedDialog"
        :visible.sync="selectedDialogVis"
        :value="selectedDialogParams"
        :columnConfig="columnConfig"
        :dialogConfig="selectedDialogConfig"
        @success="doSearch"
      ></component>
    </template>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import Base from '../../Base'
import { deepClone } from '@/utils'
import { autoRequest } from '@/api/page'
import OperationListDialog from './components/operationListDialog'
import TableColumnListDialog from './components/tableColumnListDialog'
import PageEditDialog from './components/pageEditDialog.vue'
import { BuildInComponents } from '../../build-ins'
import ImageViewer from '@/components/ImageViewer'
import ApiSelect from './components/apiSelect'
import image from 'ali-oss/lib/image'
import jsonBig from 'json-bigint'
import { countryCode } from '@/filters'

export default {
  name: 'Query',
  extends: Base,
  components: {
    OperationListDialog,
    TablePagination,
    TableColumnListDialog,
    PageEditDialog,
    ImageViewer,
    ApiSelect,
    ...BuildInComponents
  },
  props: {
    componentName: {
      type: String,
      default: ''
    },
    fromId: {
      type: Number,
      default: 0
    },
    debug: {
      // 是否处于调试状态
      type: Boolean,
      default: false
    },
    pid: {
      type: Number,
      default: 0
    }
  },
  filters: {
    // 聊天内容解析
    handleChatMessage(val) {
      if (val.messageType == 'audio') {
        console.log(val)
      }
    },

    // 开启服务类型
    openServices(val) {
      // console.log('val-----', val)
      let serviceList = [
        {
          key: 4,
          value: '实时文字'
        },
        {
          key: 5,
          value: '实时音频'
        },
        {
          key: 6,
          value: '实时视频'
        },
        {
          key: 7,
          value: '仪式订单'
        },
        {
          key: 9,
          value: '离线订单'
        },
        {
          key: 12,
          value: '倾听文字'
        },
        {
          key: 13,
          value: '倾听语音'
        }
      ]
      let arr = []
      val.forEach(item => {
        serviceList.forEach(option => {
          if (item == option.key) {
            arr.push(option.value)
          }
        })
      })
      // console.log('arr-----', arr)
      return arr.join('/')
    },

    // 秒转换为时分秒
    secondTohms(value) {
      // console.log('value----', value)
      var secondTime = parseInt(value) // 秒
      var minuteTime = 0 // 分
      var hourTime = 0 // 小时
      if (secondTime > 60) {
        //如果秒数大于60，将秒数转换成整数
        //获取分钟，除以60取整数，得到整数分钟
        minuteTime = parseInt(secondTime / 60)
        //获取秒数，秒数取余，得到整数秒数
        secondTime = parseInt(secondTime % 60)
        //如果分钟大于60，将分钟转换成小时
        if (minuteTime > 60) {
          //获取小时，获取分钟除以60，得到整数小时
          hourTime = parseInt(minuteTime / 60)
          //获取小时后取余的分，获取分钟除以60取余的分
          minuteTime = parseInt(minuteTime % 60)
        }
      }
      var result = '' + parseInt(secondTime) + ' 秒'
      if (minuteTime > 0) {
        result = '' + parseInt(minuteTime) + ' 分 ' + result
      }
      if (hourTime > 0) {
        result = '' + parseInt(hourTime) + ' 小时 ' + result
      }
      // console.log('result', result)
      return result
    },

    // 分转换为天时分
    minToHourMin(value) {
      // var time = []
      // var day = parseInt(value / 60 / 24)
      // var hour = parseInt((value / 60) % 24)
      // var min = parseInt(value % 60)
      // time[0] = day > 0 ? day : 0
      // time[1] = hour > 0 ? hour : 0
      // time[2] = min > 0 ? parseFloat(min) : 0
      // if (time[0] == 0 && time[1] == 0 && time[2] == 0) {
      //   return 0
      // }
      if (value < 60) {
        return Math.round(value) + ' 分钟'
      } else {
        return (
          parseInt(value / 60) + ' 小时 ' + Math.round(value % 60) + ' 分钟'
        )
      }
    },

    customFilter(object, expression) {
      return eval('`' + expression + '`')
    },
    booleanFilter(b) {
      if (b === 'false') {
        return '否'
      }
      return Boolean(b) ? '是' : '否'
    },
    numberFilter(val, fix) {
      fix = fix || 0
      const num = Number(val)
      if (num) {
        return num.toFixed(fix)
      }
      return val
    },
    enumFilter(val, enums) {
      if (val == undefined) {
        return ''
      }
      return enums[val.toString()] || val
    },
    multiEnumFilter(val, enums) {
      if (!val) {
        return val
      }
      if (typeof val === 'object') {
        if (val.forEach) {
          const result = []
          val.forEach(item => {
            result.push(enums[val.toString()] || val)
          })
          return result.join(',')
        } else {
          return val
        }
      }
      const s = val.split(',')
      const result = []
      s.forEach(item => {
        result.push(enums[val.toString()] || val)
      })
      return result.join(',')
    },
    mutiItemDataFilter(item) {
      return (
        'id：' +
        item.goodsId +
        '，名称：' +
        item.goodsName +
        '，价格：' +
        item.price +
        '，数量：' +
        item.num
      )
    }
  },
  data() {
    return {
      daterangeValue: '',
      // dialogFormVisible2: false,
      tableDisplayEditDialogVisible: false,
      tableOperationEditDialogVisible: false,
      selectedDialog: null,
      selectedDialogParams: {},
      selectedDialogVis: false,
      selectedDialogConfig: null,
      columnConfig: null,
      showImage: false,
      imageUrlToShow: null,
      imageViewType: 'image',
      // screenItem: { selectModel: '', placeholder: '', label: '', options: [] },
      requestItem: {
        host: '',
        url: '',
        model: '',
        params: [],
        data: [],
        isAutoRequest: null,
        message: '',
        requestName: ''
      },
      defaultQueryParams: null,
      defaultBodyParams: null,
      resultData: [],
      resultCount: 0,
      needReloadOnUpdate: false,
      rowSelections: null
    }
  },
  methods: {
    onCreated: function() {
      if (this.configData.selectRequest) {
        this.requestItem = deepClone(this.configData.selectRequest)
        const requestItemParams = {}
        const params = JSON.parse(this.configData.selectRequest.params)
        const requestItemData = {}
        const data = JSON.parse(this.configData.selectRequest.data)
        if (params) {
          params.forEach(item => {
            if (
              item.name === 'page' ||
              item.name === 'pageNum' ||
              item.name === 'offset' ||
              item.name === 'limit' ||
              item.name === 'pageSize'
            ) {
              requestItemParams[item.name] = parseInt(item.value)
            } else {
              requestItemParams[item.name] = item.value
            }
          })
        }
        if (data) {
          params.forEach(item => {
            requestItemData[item.name] = item.value
          })
        }
        this.$set(this.requestItem, 'params', requestItemParams)
        this.$set(this.requestItem, 'data', requestItemData)
        this.defaultQueryParams = Object.assign({}, this.requestItem.params)
        this.defaultBodyParams = Object.assign({}, this.requestItem.data)
      }
    },
    splitImage(images, delimiter) {
      console.log('call split:', images, delimiter)
      return images.split(delimiter)
    },

    resetPaginationAndSearch() {
      this.requestItem.params.offset = 0
      this.requestItem.paramspageNum = 1
      this.doSearch()
    },

    removeEmptyValues(obj) {
      return Object.keys(obj).reduce((acc, key) => {
        if (
          obj[key] !== null &&
          obj[key] !== undefined &&
          obj[key] !== '' &&
          !(typeof obj[key] === 'object' && Object.key(obj[key]).length === 0)
        ) {
          acc[key] = obj[key]
        }
        return acc
      }, {})
    },

    doSearch: function() {
      this.listLoading = true
      if (this.configData.selectRequest) {
        const requests = this.requestItem
        requests.params = this.removeEmptyValues(requests.params)
        autoRequest(
          requests.url,
          requests.model,
          requests.params,
          requests.data
        )
          .then(resp => {
            this.processResult(resp)
            if (requests.message.length > 0) {
              this.$message.success(requests.message)
            }
            this.listLoading = false
          })
          .catch(err => {
            this.listLoading = false
            this.$message.error(err)
          })
      } else {
        this.listLoading = false
      }
    },

    processResult(resp) {
      let tableColumns = this.configData.tableColumns
      if (!tableColumns) {
        tableColumns = []
      }
      const keyset = {}
      tableColumns.forEach(item => {
        keyset[item.key] = item
      })
      const listKey = this.configData.listKey
      const countKey = this.configData.countKey
      if (listKey) {
        if (resp.data && resp.data[listKey]) {
          resp.data[listKey].forEach(item => {
            for (const itemKey in item) {
              if (keyset[itemKey]) {
                const columnConfig = keyset[itemKey]
                if (columnConfig.type === '多张图片') {
                  if (typeof item[itemKey] === 'string') {
                    try {
                      item[itemKey] = JSON.parse(item[itemKey])
                    } catch (e) {
                      item[itemKey] = item[itemKey].split(',')
                    }
                  }
                }
                continue
              } else {
                const newTableColumn = {
                  key: itemKey,
                  label: itemKey,
                  visible: true,
                  order: 100,
                  type: '字符串'
                }
                keyset[itemKey] = newTableColumn
                tableColumns.push(newTableColumn)
              }
            }
          })
          this.resultData = resp.data[listKey]
        }
      } else {
        for (const itemKey in resp.data) {
          if (keyset[itemKey]) {
            continue
          } else {
            const newTableColumn = {
              key: itemKey,
              label: itemKey,
              visible: true,
              order: 100,
              type: '字符串'
            }
            keyset[itemKey] = newTableColumn
            tableColumns.push(newTableColumn)
          }
        }
        this.resultData = [resp.data]
      }
      if (countKey) {
        this.resultCount = resp.data[countKey]
      } else {
        this.resultCount = 0
      }

      this.configData.tableColumns = tableColumns
    },

    resetFilter() {
      if (this.defaultQueryParams) {
        this.requestItem.params = Object.assign({}, this.defaultQueryParams)
      }
      this.daterangeValue = ''
      this.doSearch()
    },

    editPage() {
      this.editDialogFormVisible = true
    },

    savePage(configData) {
      if (this.configData.listKey != configData.listKey) {
        configData.tableColumns = []
      }
      this.configData = configData
      this.updatePage(true)
    },

    handleImageClicked(object, expression, type) {
      this.showImage = true
      if (expression) {
        object = eval('`' + expression + '`')
      }
      this.imageUrlToShow = this.imageUrl(object)
      console.log('this.imageUrlToShow', this.imageUrlToShow)
      if (!type) {
        this.imageViewType = 'image'
      } else {
        this.imageViewType = type
      }
    },

    handleTableEditClicked() {
      this.tableDisplayEditDialogVisible = true
      this.needReloadOnUpdate = false
    },

    saveTableColumns(tableColumnsToEdit) {
      const current = {}
      this.configData.tableColumns.forEach(item => {
        current[item.key] = item
      })
      const newColumns = []
      let needReloadPage = false
      tableColumnsToEdit.forEach(item => {
        const currentItem = current[item.key]
        if (!currentItem) {
          newColumns.push(item)
          return
        }
        if (
          currentItem.order != item.order ||
          currentItem.visible != item.visible
        ) {
          needReloadPage = true
        }
        newColumns.push(item)
      })
      newColumns.sort((a, b) => {
        return a.order - b.order
      })
      this.configData.tableColumns = newColumns
      this.updatePage(needReloadPage)
      this.tableDisplayEditDialogVisible = false
    },

    handleTableOperationClicked() {
      this.tableOperationToEdit = []
      this.tableOperationEditDialogVisible = true
    },

    saveTableOperations(data) {
      this.tableOperationEditDialogVisible = false
      this.configData.tableOperations = data
      this.updatePage()
    },

    operationVisible(operation, row) {
      if (operation.visible) {
        const result = eval(eval('`' + operation.visible + '`'))
        return result
      }
      return true
    },

    // 这里的row, 还有rows都不能随意修改名字, 会直接挂掉所有的操作
    performTableOperation(operation, row, rows) {
      console.log('perform op: ', operation, row, rows)
      if (operation.operationType === 1 || operation.operationType === 2) {
        let body = null
        if (operation.dialogParams) {
          body = eval('`' + operation.dialogParams + '`')
          body = body.replaceAll('\n', '<br>')
          body = JSON.parse(body) // parse一遍, 确保bodyParams里
        }
        this.selectedDialogConfig = operation
        this.columnConfig = this.configData.tableColumns
        this.selectedDialog = operation.dialogName
        this.selectedDialogParams = body
        this.selectedDialogVis = true
        return
      }

      if (operation.operationType === 3) {
        let redirect = null
        if (operation.redirect) {
          redirect = eval('`' + operation.redirect + '`')
          this.$router.push(redirect)
        }
        return
      }

      const url = eval('`' + operation.api + '`')
      let body = null
      // var JSONbigString = require('json-bigint')({ "storeAsString": true });
      if (operation.bodyParams) {
        console.log(operation.bodyParams, '1111111111111111')
        body = eval('`' + operation.bodyParams + '`')
        console.log(body, '222222222222222')
        body = jsonBig.parse(body) // parse一遍, 确保bodyParams里
        console.log(body, '3333333')
      }
      if (operation.needConfirm) {
        this.$confirm('即将执行' + operation.desc + '', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          autoRequest(url, operation.requestType, null, body).then(resp => {
            this.doSearch()
          })
        })
      } else {
        autoRequest(url, operation.requestType, null, body).then(resp => {
          this.doSearch()
        })
      }
    },
    handleSizeChangeOffsetLimit(val) {
      this.requestItem.params.limit = val
      this.requestItem.params.pageSize = val
      this.doSearch()
    },
    handleCurrentChangeOffsetLimit(val) {
      this.requestItem.params.page = val
      this.requestItem.params.pageNum = val
      this.requestItem.params.offset = (val - 1) * this.requestItem.params.limit
      this.doSearch()
    },
    handleSizeChangePageLimit(val) {
      this.requestItem.params.limit = val
      this.doSearch()
    },
    handleDateRangeChanged(val) {
      if (this.configData.timeFormat === 'timemillis') {
        if (val) {
          const startTime = val[0]
          this.requestItem.params[
            this.configData.startTimeField
          ] = /\d{2}:\d{2}$/g.test(startTime)
            ? new Date(startTime).getTime()
            : new Date(startTime + ' 00:00:00').getTime()
          const endTime = val[1]
          this.requestItem.params[
            this.configData.endTimeField
          ] = /\d{2}:\d{2}$/g.test(endTime)
            ? new Date(endTime).getTime()
            : new Date(endTime + ' 23:59:59').getTime()
        } else {
          this.requestItem.params[this.configData.startTimeField] = null
          this.requestItem.params[this.configData.endTimeField] = null
        }
      } else {
        const start = new Date(val && val[0])
        this.requestItem.params[
          this.configData.startTimeField
        ] = `${start.getFullYear()}-${
          start.getMonth() > 8
            ? start.getMonth() + 1
            : '0' + (start.getMonth() + 1)
        }-${start.getDate() > 9 ? start.getDate() : '0' + start.getDate()}`
        // end_time 需要+1天,
        if (!val || !val[1]) {
          this.requestItem.params[this.configData.endTimeField] = null
        } else {
          const end = new Date(new Date(val[1]).getTime() + 24 * 60 * 60 * 1000)
          this.requestItem.params[
            this.configData.endTimeField
          ] = `${end.getFullYear()}-${
            end.getMonth() > 8 ? end.getMonth() + 1 : '0' + (end.getMonth() + 1)
          }-${end.getDate() > 9 ? end.getDate() : '0' + end.getDate()}`
        }
      }
    },
    handleSelectionChange(selections) {
      this.rowSelections = selections
    },
    handleBulkOperation(operation, noRows) {
      if (noRows) {
        this.performTableOperation(operation)
      } else {
        if (!this.rowSelections) {
          this.$message.error('请选择批量操作的行...')
          return
        }
        const rows = []
        if (operation.rowFilter) {
          this.rowSelections.forEach(row => {
            const rowFieldValue = eval('`' + operation.rowFilter + '`')
            rows.push(rowFieldValue)
          })
        }
        this.performTableOperation(operation, null, JSON.stringify(rows))
      }
    },
    arrayToString(a) {}
  }
}
</script>

<style lang="scss">
.longText {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.photos-list {
  display: flex;
  flex-wrap: no-wrap;
  li {
    width: 100px;
    height: 100px;
    margin: 5px;
    list-style: none;
    cursor: pointer;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
.items-list {
  li {
    margin: 0;
    padding: 0;
    text-align: left;
    list-style: none;
    cursor: pointer;
    position: relative;
  }
}
.haveHAndWImg {
  width: 100px;
  height: 100px;
}
</style>
